<template>
    <div>
         <!-- 面包屑导航区域 -->
        <div class="bread_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>权限列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

         <!-- 卡片视图区域 -->
         <el-card>

              <el-table
                ref="multipleTable"
                :data="rightList"
                tooltip-effect="dark"
                style="width: 100%"
                >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column  label="授权角色" >
                  <template slot-scope="scope">
                    <!-- {{scope.row.roleId}} -->
                  <span v-show="scope.row.roleId === 1">管理员</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="权限字符">
                  <template slot-scope="scope">
                    <el-tag v-show="scope.row.roleId === 1"
                      type="success"
                      effect="plain">
                        admin
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="接口描述"> </el-table-column>
                <el-table-column prop="url" label="接口Url"> </el-table-column>
                <el-table-column label="状态">
                    <template>
                        <el-switch v-model="status">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="success" size="mini" plain><i class="el-icon-view"></i><span>详情</span></el-button>
                    </template>
                </el-table-column>
            </el-table>

             <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.cur"
                :page-sizes="[6, 8, 10, 20]"
                :page-size="pageInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
            </el-pagination>

         </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取权限列表参数
      pageInfo: {
        cur: '',
        size: 6
      },
      total: 0,
      status: '',
      // 权限列表
      rightList: []
    }
  },
  methods: {
    // 获取权限列表
    async getRightList () {
      const { data: res } = await this.$http.get('/authority/selectUrl', { params: this.pageInfo })
      console.log('获取权限列表', res)
      if (res.code !== 200) return
      this.rightList = res.data.list
      this.total = res.data.total
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
    //   console.log(newSize)
      this.pageInfo.size = newSize
      this.getRightList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
    //   console.log(newCur)
      this.pageInfo.cur = newCur
      this.getRightList()
    }
  },
  created () {
    this.getRightList()
  }

}
</script>

<style lang="less" scoped>

</style>
